<template>
  <div id="rightcont1">

    <el-row style="border: 0">
      <el-col :span="16" :xs="24">
        <el-col :span="6" :xs="14" :style="Pstyle1">
          <img :style="Imgborder1" src="../../assets/lvxing.webp" alt="">
        </el-col>
        <el-col :span="18" :xs="10" :style="Pstyle3">
          <router-link to=""><h2 style="font-size: 21px">旅行·在路上</h2></router-link>
          <p class="hidden-xs-only" :style="fontStyle1"><router-link to="" style="color: #2D93CA">简书</router-link> 编 · 收录了153270篇文章 · 3063179人关注</p>
        </el-col>
        <el-col :span="24" class="hidden-sm-and-up" style="margin-top: 20px">
          <p :style="fontStyle1">
            <router-link to="" style="color: #2D93CA">简书</router-link>
            编 · 收录了153270篇文章 · 3063179人关注
          </p>
        </el-col>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-button style="border-radius: 50px;margin-top: 10px" type="success" plain>
          投稿
        </el-button>
        <el-button style="border-radius: 50px;margin-top: 10px" type="success" plain>
          专题主页<i class="el-icon-arrow-right"></i>
        </el-button>
      </el-col>
    </el-row>
    <div class="layui-tab layui-tab-brief tuijian">
      <ul class="layui-tab-title">
        <li class="layui-this"><b>全部推荐</b></li>
        <li><b><i class="el-icon-s-custom"></i>推荐作者</b></li>
        <li class=" hidden-xs-only"><b><i class="el-icon-menu"></i>推荐专题</b></li>
      </ul>
      <div class="layui-tab-content">
        <!--                全部推荐-->
        <div class="layui-tab-item layui-show">

          <el-row class="yd-tjzhuanti">
            <el-col :span="24">
              <p :style="Pstyle2" class="layui-icon el-icon-s-opportunity"> 简书推荐专题</p>
            </el-col>
            <el-col :span="16" :xs="13">
              <el-col :span="4" :xs="14" :style="Pstyle1">
                <img :style="Imgborder" src="../../assets/sheying.webp" alt="">
              </el-col>
              <el-col :span="20" :xs="10" :style="Pstyle">
                <router-link to=""><h2>摄影</h2></router-link>
                <p class="hidden-xs-only" :style="fontStyle">生活本无趣 光影挽留年 用图片 说故事 记录生活 记...</p>
                <router-link class="hidden-xs-only" to="" :style="fontStyle"><i class="el-icon-menu">116.3K篇文章
                  · 2363.7K人关注</i></router-link>
              </el-col>
            </el-col>
            <!--关注按钮-->
            <el-col :span="6" :xs="9" :offset="2">
              <button class="guanzhuBtn" style="border-radius: 50px;margin-top: 10px;padding: 6px 20px 6px 20px;width: 98px;border:1px solid #42c02e;background-color: #f0f9eb;color:#42c02e"
                      v-if="IsShows" @click="changeCase1">
                +关注
              </button>
              <div class="yiguanzhuBtn"  v-else>
                <button style="border-radius: 50px;margin-top: 10px;padding: 6px 20px 6px 20px;width: 98px;border:1px solid #42c02e;background-color: #f0f9eb;color:#42c02e">
                  <i class="el-icon-check"></i>已关注
                </button>
                <button class="qxguanzhuBtn" @click="changeCase1">
                  取消关注
                </button>
              </div>
            </el-col>
            <el-col :span="24" class="hidden-sm-and-up">
              <p :style="fontStyle">生活本无趣 光影挽留年 用图片 说故事 记录生活 记...</p>
              <router-link to="" :style="fontStyle"><i class="el-icon-menu">116.3K篇文章 · 2363.7K人关注</i>
              </router-link>
            </el-col>
          </el-row>

          <div v-for="(index,i) in goods">
            <el-row class="yd-tjzhuanti">
              <el-col :span="24">
                <p :style="Pstyle2" class="layui-icon el-icon-s-opportunity"> 简书推荐专题</p>
              </el-col>
              <el-col :xs="24" class="hidden-sm-and-up">
                <router-link to="" class="hidden-xs-only"><h2>{{index.title}}</h2></router-link>
              </el-col>
              <el-col :span="16" :xs="13">
                <el-col :span="4" :xs="14" :style="Pstyle1">
                  <img :style="Imgborder" :src="index.picInfo[0].url" alt="">
                </el-col>
                <el-col :span="20" :xs="10" :style="Pstyle">
                  <router-link to="" class="hidden-xs-only"><h2>{{index.title}}</h2></router-link>
                  <p class="hidden-xs-only" :style="fontStyle">{{index.digest}}</p>
                  <router-link class="hidden-xs-only" to="" :style="fontStyle"><i
                          class="el-icon-menu">{{index.tcount}}k评论 · 2363.7K人关注 / {{index.ptime}}</i>
                  </router-link>
                </el-col>
              </el-col>
              <!--关注按钮-->
              <el-col :span="6" :xs="9" :offset="2">
                <button class="guanzhuBtn" style="border-radius: 50px;margin-top: 10px;padding: 6px 20px 6px 20px;width: 98px;border:1px solid #42c02e;background-color: #f0f9eb;color:#42c02e"
                        v-show="index.tag" @click="changeCase(i)">
                  +关注
                </button>
                <div class="yiguanzhuBtn"  v-show="!index.tag">
                  <button style="border-radius: 50px;margin-top: 10px;padding: 6px 20px 6px 20px;width: 98px;border:1px solid #42c02e;background-color: #f0f9eb;color:#42c02e">
                    <i class="el-icon-check"></i>已关注
                  </button>
                  <button class="qxguanzhuBtn" @click="changeCase(i)">
                    取消关注
                  </button>
                </div>
              </el-col>
              <!--移动-->
              <el-col :span="24" class="hidden-sm-and-up">
                <router-link to="" class="yd-GZtitle"><h2>{{index.title}}</h2></router-link>
                <p :style="fontStyle">{{index.digest}}</p>
                <router-link to="" :style="fontStyle"><i class="el-icon-menu">{{index.tcount}}K篇文章 ·
                  2363.7K人关注 / {{index.ptime}}</i>
                </router-link>
              </el-col>
            </el-row>
          </div>

          <button :style="readMore">阅读更多</button>
        </div>
        <!--                推荐作者-->
        <div class="layui-tab-item">
          <div v-for="(index,o) in goods2">
            <el-row class="yd-tjzhuanti">
              <el-col :span="24">
                <p :style="Pstyle2" class="layui-icon el-icon-s-opportunity"> 简书推荐专题</p>
              </el-col>
              <el-col :xs="24" class="hidden-sm-and-up">
                <router-link to="" class="hidden-xs-only"><h2>{{index.title}}</h2></router-link>
              </el-col>
              <el-col :span="16" :xs="13">
                <el-col :span="4" :xs="14" :style="Pstyle1">
                  <img :style="Imgborder" :src="index.picInfo[0].url" alt="">
                </el-col>
                <el-col :span="20" :xs="10" :style="Pstyle">
                  <router-link to="" class="hidden-xs-only"><h2>{{index.title}}</h2></router-link>
                  <p class="hidden-xs-only" :style="fontStyle">{{index.digest}}</p>
                  <router-link class="hidden-xs-only" to="" :style="fontStyle"><i
                          class="el-icon-menu">{{index.tcount}}k评论 · 2363.7K人关注 / {{index.ptime}}</i>
                  </router-link>
                </el-col>
              </el-col>
              <!--关注按钮-->
              <el-col :span="6" :xs="9" :offset="2">
                <button class="guanzhuBtn" style="border-radius: 50px;margin-top: 10px;padding: 6px 20px 6px 20px;width: 98px;border:1px solid #42c02e;background-color: #f0f9eb;color:#42c02e"
                        v-show="index.tag" @click="changeCase2(o)">
                  +关注
                </button>
                <div class="yiguanzhuBtn"  v-show="!index.tag">
                  <button style="border-radius: 50px;margin-top: 10px;padding: 6px 20px 6px 20px;width: 98px;border:1px solid #42c02e;background-color: #f0f9eb;color:#42c02e">
                    <i class="el-icon-check"></i>已关注
                  </button>
                  <button class="qxguanzhuBtn" @click="changeCase2(o)">
                    取消关注
                  </button>
                </div>
              </el-col>
              <!--移动-->
              <el-col :span="24" class="hidden-sm-and-up">
                <router-link to="" class="yd-GZtitle"><h2>{{index.title}}</h2></router-link>
                <p :style="fontStyle">{{index.digest}}</p>
                <router-link to="" :style="fontStyle"><i class="el-icon-menu">{{index.tcount}}K篇文章 ·
                  2363.7K人关注 / {{index.ptime}}</i>
                </router-link>
              </el-col>
            </el-row>
          </div>

          <button :style="readMore">阅读更多</button>
        </div>
        <!--                推荐专题-->
        <div class="layui-tab-item">
          <div v-for="(index,s) in goods3">
            <el-row class="yd-tjzhuanti">
              <el-col :span="24">
                <p :style="Pstyle2" class="layui-icon el-icon-s-opportunity"> 简书推荐专题</p>
              </el-col>
              <el-col :xs="24" class="hidden-sm-and-up">
                <router-link to="" class="hidden-xs-only"><h2>{{index.title}}</h2></router-link>
              </el-col>
              <el-col :span="16" :xs="13">
                <el-col :span="4" :xs="14" :style="Pstyle1">
                  <img :style="Imgborder" :src="index.picInfo[0].url" alt="">
                </el-col>
                <el-col :span="20" :xs="10" :style="Pstyle">
                  <router-link to="" class="hidden-xs-only"><h2>{{index.title}}</h2></router-link>
                  <p class="hidden-xs-only" :style="fontStyle">{{index.digest}}</p>
                  <router-link class="hidden-xs-only" to="" :style="fontStyle"><i
                          class="el-icon-menu">{{index.tcount}}k评论 · 2363.7K人关注 / {{index.ptime}}</i>
                  </router-link>
                </el-col>
              </el-col>
              <!--关注按钮-->
              <el-col :span="6" :xs="9" :offset="2">
                <button class="guanzhuBtn" style="border-radius: 50px;margin-top: 10px;padding: 6px 20px 6px 20px;width: 98px;border:1px solid #42c02e;background-color: #f0f9eb;color:#42c02e"
                        v-show="index.tag" @click="changeCase3(s)">
                  +关注
                </button>
                <div class="yiguanzhuBtn"  v-show="!index.tag">
                  <button style="border-radius: 50px;margin-top: 10px;padding: 6px 20px 6px 20px;width: 98px;border:1px solid #42c02e;background-color: #f0f9eb;color:#42c02e">
                    <i class="el-icon-check"></i>已关注
                  </button>
                  <button class="qxguanzhuBtn" @click="changeCase3(s)">
                    取消关注
                  </button>
                </div>
              </el-col>
              <!--移动-->
              <el-col :span="24" class="hidden-sm-and-up">
                <router-link to="" class="yd-GZtitle"><h2>{{index.title}}</h2></router-link>
                <p :style="fontStyle">{{index.digest}}</p>
                <router-link to="" :style="fontStyle"><i class="el-icon-menu">{{index.tcount}}K篇文章 ·
                  2363.7K人关注 / {{index.ptime}}</i>
                </router-link>
              </el-col>
            </el-row>
          </div>

          <button :style="readMore">阅读更多</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name:'rightcont1',
    data() {
      return {
        IsShows:false,
        goods: '',
        goods2: '',
        goods3: '',
        i: -1,
        fontStyle: {
          fontSize: '12px',
          color: '#969696'
        },
        fontStyle1: {
          fontSize: '14px',
          color: '#969696'
        },
        Imgborder: {
          borderRadius: '5px',
          width: '52px',
          height: '52px'
        },
        Imgborder1: {
          borderRadius: '8px',
          width: '80px',
          height: '80px'
        },
        Pstyle: {
          lineHeight: '28px'
        },
        Pstyle3: {
          lineHeight: '40px'
        },
        Pstyle1: {
          lineHeight: '58px',
        },
        Pstyle2: {
          margin: '10px 0 10px 0',
          fontSize: '12px',
          color: '#ec6e56'
        },
        readMore: {
          width: '100%',
          backgroundColor: '#a5a5a5',
          color: '#fff',
          fontSize: '15px',
          border: '0',
          borderRadius: '50px',
          margin: '30px 0 30px 0',
          padding: ' 8px 0 8px 0'
        }
      }
    },
    methods: {
      changeCase1(){
        this.IsShows=!this.IsShows
      },
      changeCase(i) {
        this.goods[i].tag = !this.goods[i].tag;
      },
      changeCase2(o) {
        this.goods2[o].tag = !this.goods2[o].tag;
      },
      changeCase3(s) {
        this.goods3[s].tag = !this.goods3[s].tag;
      },
      guanzhu() {
        // 调用API获取数组https://www.apiopen.top/journalismApi
        this.axios.get('/moock/news.json').then((response) => {
          this.goods = response.data.data.sports;
          this.goods2 = response.data.data.war;
          this.goods3 = response.data.data.auto;
          /* 给所取api内容字段tag设置true/false,来实现关注按钮切换 */
          // for (a = 0; a < this.cont.length; a++) {
          //     this.cont[a].tag = true;
          //     console.log(this.cont[a].tag)
          // };
          // for (i = 0; i < this.goods.length; i++) {
          //   this.goods[i].tag = true;
            // console.log(!this.goods[i].tag)
          // };
          // for (o = 0; o < this.goods2.length; o++) {
          //   this.goods2[o].tag = true;
            // console.log(!this.goods[i].tag)
          // };
          // for (s = 0; s < this.goods3.length; s++) {
          //   this.goods3[s].tag = true;
            // console.log(!this.goods[i].tag)
          // };

        })
      }
    },
    mounted: function () {
      this.guanzhu();
    }
  }
</script>

<style scoped>
  #rightcont1 .tuijian li{
    /*padding: 13px 20px;*/
    font-size: 15px;
    font-weight: 900;
    /*color: #969696;*/
    /*line-height: 25px;*/
  }
  #rightcont1 h2{
    color: #333333;
    font-size: 15px;
    font-weight: 700;
  }
  .el-row{
    padding: 10px 0 10px 0;
    border-bottom: 1px solid #f0f0f0;
  }

  .guanzhuBtn:hover {
    background-color: #42c02e !important;
    color: #fff !important;
  }

  .yiguanzhuBtn {
    width: 98px;
    z-index: 55;
  }

  .qxguanzhuBtn {
    position: absolute;
    margin-top: -34px;
    border-radius: 50px;
    padding: 7px 20px 7px 20px;
    width: 98px;
    border: 1px solid #b3b3b3;
    background-color: #f0f9eb !important;
    color: #969696;
    display: none
  }

  .yiguanzhuBtn:hover .qxguanzhuBtn {
    display: block;
  }

  @media screen and(max-width: 750px) {
    #rightcont1 .tuijian{
      width: 50%;
    }
    #rightcont1 .tuijian ul>li{
      /*margin-bottom: 50px;*/
    }
  }
</style>
